<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<!-- Google Maps -->
		<script
			src="http://maps.google.com/maps?file=api&amp;v=${it.googleMapApiVersion}&amp;key=${it.googleMapApiKey}"
			type="text/javascript"></script>
		
		<!-- DWR -->
		<script type='text/javascript'
			src='/tt-jsf/dwr/interface/travelTracker.js'></script>
		<script type='text/javascript'
			src='/tt-jsf/dwr/engine.js'></script>
		
		<script type="text/javascript">
		    //<![CDATA[
			
		    function load() {
				if (GBrowserIsCompatible()) {
					map = new GMap2(document.getElementById("mapDiv123"));
					map.addControl(new GLargeMapControl());
					map.addControl(new GScaleControl());
					map.addControl(new GMapTypeControl());	
					map.addMapType(G_PHYSICAL_MAP);
					map.setMapType(G_PHYSICAL_MAP);
					map.addControl(new GOverviewMapControl());

					bounds = new GLatLngBounds(new GLatLng(${it.minLatitude}, ${it.minLongitude}), new GLatLng(${it.maxLatitude}, ${it.maxLongitude}));
					
					//maplevel = map.getBoundsZoomLevel(bounds);
					//map.setCenter(new GLatLng(${it.centerLatitude}, ${it.centerLongitude}), maplevel);
					//map.setZoom(map.getBoundsZoomLevel(bounds));
					map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
					
					map.enableScrollWheelZoom();
					//map.addOverlay(new GLayer("com.panoramio.all"));				
					
					mgr = new GMarkerManager(map);
					
					var mapDiv = document.getElementById("mapDiv123");
					GEvent.addDomListener(mapDiv, "DOMMouseScroll", wheelevent);
    				mapDiv.onmousewheel = wheelevent;
    				 
					page = 0;
					trip = 0;
					
					loadWayPoints("${it.tripKey}", 0);
				}
		    }
		
			function loadWayPoints(tripKey, pageNumber){
				trip = tripKey;
				if(pageNumber == 0) {
					page = 0;
					//loadBlogEntries(tripKey);
				}
				document.getElementById("moreLink").innerHTML="...";
				travelTracker.getPagedWayPoints(tripKey, '${it.user}', page, ${it.level}, handleWayPoints);
				page = pageNumber + 1;
			}
		
			function handleWayPoints(wayPoints) {
				//document.getElementById("trips").innerHTML="way points loaded ...";
			
				if(wayPoints.length > 0) {
					var points = new Array();
					
					if(page == 1) {
						//map.setCenter(new GLatLng(wayPoints[0].latitude, wayPoints[0].longitude));
					}
					
					for(var i = 0; i<wayPoints.length; i++) {
						points[i] = new GLatLng(wayPoints[i].latitude, wayPoints[i].longitude);
					}
					
					//map.setCenter(new GLatLng(wayPoints[wayPoints.length - 1].latitude, wayPoints[wayPoints.length - 1].longitude));
					
					var polyline = new GPolyline(points, "#0000ff", 5);
					map.addOverlay(polyline);
					
					//document.getElementById("moreLink").innerHTML="<a href='javascript:loadWayPoints(\"" + trip + "\", " + page + ")'>show more</a>";
					//document.getElementById("moreLink").innerHTML="...";
					window.setTimeout("loadWayPoints(\"" + trip + "\", " + page + ");",100);
				} else {
					//document.getElementById("moreLink").innerHTML="no more way points available";
				}
			}
			
			function prev(e) {
				if(window.event) { event.returnValue = false; } // IE
				if(e.cancelable) { e.preventDefault(); }  // DOM-Standard 
			}
			
			//----- Stop page scrolling if wheel over map ----
		    function wheelevent(e)
		    {
		        if (!e) e = window.event;
		        if (e.preventDefault) e.preventDefault();
		        e.returnValue = false;
		    }
		    //]]>
		    </script>
  <link rel="stylesheet" href="/tt-jsf/css/travelTracker.css" />
</head>
<body onload="load()" onunload="GUnload()" style="height: 100%">
	<div id="header">
		<h1>
			<c:out value="${it.title}" />
		</h1>
	</div>
	<div id="pageContainer">
		<div id="navigationContainer">
			<c:out value="${it.description}"></c:out>
		</div>
		<div id="bodyContainer">
			<div id="mapContainer">
			<div id="innerMapContainer">
				<div id="mapDiv123"></div>
			</div>
			<div id="mapControlContainer">
				<div id="trips"></div>
				<div id="moreLink"></div>
				<div id="blogEntries"></div>
			</div>
		</div>
		</div>
	</div>
	<div id="footer">
	</div>
</body>
</html>